<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div3 {
            height: 100px;
            background: red;
        }

        /*10+100*/
        .box2 #div3 {
            height: 100px;
            background: green;
        }

        /*100+10*/
        #div1 .box3 {
            height: 100px;
            background: yellow;
        }

        /*100+10*/
        #div2 .box3 {
            height: 100px;
            background: blue;
        }

        /*100+1+1*/
        #div1 div div {
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
<!--
选择器的优先级                        代码执行的顺序
            选择器的优先级一致的情况下，谁在后面谁的优先级就高，
            选择器的优先级不一致的情况下，会选择优先级就高，



    行间样式的优先级>id选择器>类选择器>标签选择器>通配符选择器



    包含选择器的优先级是一种累加的关系：
         行间样式           1000
         id选择器           100
         类选择器            10
         标签选择器           1

        数值越大，优先级就越高，值越小，优先级越低。


-->
<div class="box" id="div1">
    <div class="box2" id="div2">
        <div class="box3" id="div3"></div>
    </div>
</div>
</body>
</html>